.visibility(@displayType: block) {
    display: @displayType !important;

    table& {
        display: table !important;
    }

    tr& {
        display: table-row !important;
    }

    th&,
    td& {
        display: table-cell !important;
    }
}

.visible--s,
.visible-inline--s,
.visible-inline-block--s,
.visible--m,
.visible-inline--m,
.visible-inline-block--m,
.visible--l,
.visible-inline--l,
.visible-inline-block--l,
.visible--xl,
.visible-inline--xl,
.visible-inline-block--xl {
    display: none !important;
}

.visible--xs {
    .visibility();
}

.visible-inline--xs {
    .visibility(inline);
}

.visible-inline-block--xs {
    .visibility(inline-block);
}

.hidden--s,
.hidden--m,
.hidden--l,
.hidden--xl {
    display: inherit !important;
}

.hidden--xs {
    display: none !important;
}

@media screen and (min-width: @phoneLandscapeViewportWidth) {
    .visible--xs,
    .visible-inline--xs,
    .visible-inline-block--xs,
    .visible--m,
    .visible-inline--m,
    .visible-inline-block--m,
    .visible--l,
    .visible-inline--l,
    .visible-inline-block--l,
    .visible--xl,
    .visible-inline--xl,
    .visible-inline-block--xl {
        display: none !important;
    }

    .visible--s {
        .visibility();
    }

    .visible-inline--s {
        .visibility(inline);
    }

    .visible-inline-block--s {
        .visibility(inline-block);
    }

    .hidden--xs,
    .hidden--m,
    .hidden--l,
    .hidden--xl {
        display: inherit !important;
    }

    .hidden--s {
        display: none !important;
    }
}

@media screen and (min-width: @tabletViewportWidth) {
    .visible--xs,
    .visible-inline--xs,
    .visible-inline-block--xs,
    .visible--s,
    .visible-inline--s,
    .visible-inline-block--s,
    .visible--l,
    .visible-inline--l,
    .visible-inline-block--l,
    .visible--xl,
    .visible-inline--xl,
    .visible-inline-block--xl {
        display: none !important;
    }

    .visible--m {
        .visibility();
    }

    .visible-inline--m {
        .visibility(inline);
    }

    .visible-inline-block--m {
        .visibility(inline-block);
    }

    .hidden--xs,
    .hidden--s,
    .hidden--l,
    .hidden--xl {
        display: inherit !important;
    }

    .hidden--m {
        display: none !important;
    }
}

@media screen and (min-width: @tabletLandscapeViewportWidth) {
    .visible--xs,
    .visible-inline--xs,
    .visible-inline-block--xs,
    .visible--s,
    .visible-inline--s,
    .visible-inline-block--s,
    .visible--m,
    .visible-inline--m,
    .visible-inline-block--m,
    .visible--xl,
    .visible-inline--xl,
    .visible-inline-block--xl {
        display: none !important;
    }

    .visible--l {
        .visibility();
    }

    .visible-inline--l {
        .visibility(inline);
    }

    .visible-inline-block--l {
        .visibility(inline-block);
    }

    .hidden--xs,
    .hidden--s,
    .hidden--m,
    .hidden--xl {
        display: inherit !important;
    }

    .hidden--l {
        display: none !important;
    }
}

@media screen and (min-width: @desktopViewportWidth) {
    .visible--xs,
    .visible-inline--xs,
    .visible-inline-block--xs,
    .visible--s,
    .visible-inline--s,
    .visible-inline-block--s,
    .visible--m,
    .visible-inline--m,
    .visible-inline-block--m,
    .visible--l,
    .visible-inline--l,
    .visible-inline-block--l {
        display: none !important;
    }

    .visible--xl {
        .visibility();
    }

    .visible-inline--xl {
        .visibility(inline);
    }

    .visible-inline-block--xl {
        .visibility(inline-block);
    }

    .hidden--xs,
    .hidden--s,
    .hidden--m,
    .hidden--l {
        display: inherit !important;
    }

    .hidden--xl {
        display: none !important;
    }
}